import { create } from 'zustand';
import { shallow } from 'zustand/shallow';

interface BlogPost {
  id: number;
  title: string;
  excerpt: string;
  date: string;
  tags: string[];
  views: number;
  likes: number;
}

interface UserState {
  name: string;
  avatar: string;
  role: string;
}

interface Skill {
  name: string;
  level: number;
}

interface WorkExperience {
  company: string;
  position: string;
  period: string;
  description: string;
  technologies: string[];
}

interface UserProfile {
  name: string;
  title: string;
  bio: string;
  email: string;
  github: string;
  linkedin: string;
  twitter: string;
}

interface BlogState {
  posts: BlogPost[];
  featuredPosts: BlogPost[];
  user: UserState;
  userProfile: UserProfile;
  skills: Skill[];
  workExperience: WorkExperience[];
  searchText: string;
  selectedTag: string | null;
  currentPage: number;
  isMenuOpen: boolean;
  isCollapsed: boolean;
  // 操作方法
  setSearchText: (text: string) => void;
  setSelectedTag: (tag: string | null) => void;
  setCurrentPage: (page: number) => void;
  toggleMenu: () => void;
  toggleCollapse: () => void;
  incrementViews: (postId: number) => void;
  incrementLikes: (postId: number) => void;
}

// 博客文章数据
const allPosts: BlogPost[] = [
  {
    id: 1,
    title: '开始使用React和UMI构建现代Web应用',
    excerpt:
      '本文将介绍如何使用React和UMI框架快速搭建一个现代化的Web应用，包括路由配置、状态管理和UI组件的使用。',
    date: '2023-08-01',
    tags: ['React', 'UMI', '前端开发'],
    views: 1250,
    likes: 42,
  },
  {
    id: 2,
    title: 'Tailwind CSS：实用优先的CSS框架',
    excerpt:
      'Tailwind CSS是一个功能类优先的CSS框架，它提供了低级实用工具类，让你可以直接在HTML中构建自定义设计，而无需编写CSS。',
    date: '2023-07-25',
    tags: ['CSS', 'Tailwind', '设计'],
    views: 980,
    likes: 36,
  },
  {
    id: 3,
    title: 'UI设计语言与组件库',
    excerpt: '本文探讨现代UI设计语言和组件库的重要性，以及如何选择适合项目的UI库。',
    date: '2023-07-18',
    tags: ['UI', '组件库', '设计系统'],
    views: 1100,
    likes: 39,
  },
  {
    id: 4,
    title: 'JavaScript异步编程：从回调到Async/Await',
    excerpt:
      '本文将介绍JavaScript中异步编程的演变历程，从最初的回调函数，到Promise，再到现代的Async/Await语法。',
    date: '2023-07-10',
    tags: ['JavaScript', '异步编程', 'Async/Await'],
    views: 1500,
    likes: 58,
  },
  {
    id: 5,
    title: 'React Hooks深入理解与实践',
    excerpt:
      'React Hooks是React 16.8引入的新特性，它让你在不编写class的情况下使用state和其他React特性。本文将深入探讨Hooks的工作原理和最佳实践。',
    date: '2023-07-05',
    tags: ['React', 'Hooks', '函数组件'],
    views: 1800,
    likes: 76,
  },
  {
    id: 6,
    title: 'TypeScript入门指南：为JavaScript开发者准备',
    excerpt:
      'TypeScript是JavaScript的超集，它添加了静态类型检查和其他特性。本文将帮助JavaScript开发者快速入门TypeScript。',
    date: '2023-06-28',
    tags: ['TypeScript', 'JavaScript', '类型系统'],
    views: 1350,
    likes: 47,
  },
  {
    id: 7,
    title: '现代前端工程化实践',
    excerpt:
      '前端工程化是指将前端开发流程规范化、标准化，本文将介绍现代前端工程化的实践方法，包括构建工具、代码规范、自动化测试等。',
    date: '2023-06-20',
    tags: ['前端工程化', 'Webpack', 'CI/CD'],
    views: 1050,
    likes: 38,
  },
  {
    id: 8,
    title: 'CSS Grid布局完全指南',
    excerpt: 'CSS Grid是一种强大的二维布局系统，本文将全面介绍CSS Grid的使用方法和实践技巧。',
    date: '2023-06-15',
    tags: ['CSS', 'Grid', '响应式设计'],
    views: 950,
    likes: 32,
  },
];

// 创建store
export const useBlogStore = create<BlogState>((set) => ({
  posts: allPosts,
  featuredPosts: allPosts.slice(0, 3),
  user: {
    name: '博主名字',
    avatar: 'https://via.placeholder.com/150',
    role: '前端开发工程师 / 技术博主',
  },
  userProfile: {
    name: '张三',
    title: '高级前端开发工程师',
    bio: '热爱Web开发和用户体验设计的前端工程师，专注于React生态系统和现代JavaScript应用程序开发。喜欢探索新技术并分享知识。',
    email: 'example@example.com',
    github: 'https://github.com/example',
    linkedin: 'https://linkedin.com/in/example',
    twitter: 'https://twitter.com/example',
  },
  skills: [
    { name: 'JavaScript', level: 95 },
    { name: 'React', level: 90 },
    { name: 'TypeScript', level: 85 },
    { name: 'HTML/CSS', level: 90 },
    { name: 'Node.js', level: 80 },
    { name: 'UMI', level: 85 },
    { name: 'Tailwind CSS', level: 88 },
    { name: 'Framer Motion', level: 75 },
  ],
  workExperience: [
    {
      company: 'ABC科技有限公司',
      position: '高级前端开发工程师',
      period: '2021年1月 - 至今',
      description: '负责公司核心产品的前端架构设计和开发，优化用户体验和性能，指导初级开发人员。',
      technologies: ['React', 'TypeScript', 'UMI', 'Tailwind CSS'],
    },
    {
      company: 'XYZ互联网公司',
      position: '前端开发工程师',
      period: '2018年6月 - 2020年12月',
      description: '参与多个Web应用项目的开发，实现响应式设计和交互功能，解决浏览器兼容性问题。',
      technologies: ['JavaScript', 'Vue.js', 'SCSS', 'Webpack'],
    },
    {
      company: '创新科技初创公司',
      position: '初级前端开发人员',
      period: '2017年3月 - 2018年5月',
      description: '协助开发公司官网和内部管理系统，学习并应用前端最佳实践。',
      technologies: ['HTML', 'CSS', 'jQuery', 'Bootstrap'],
    },
  ],
  searchText: '',
  selectedTag: null,
  currentPage: 1,
  isMenuOpen: false,
  isCollapsed: false,

  // 操作方法
  setSearchText: (text) => set({ searchText: text }),
  setSelectedTag: (tag) => set({ selectedTag: tag }),
  setCurrentPage: (page) => set({ currentPage: page }),
  toggleMenu: () => set((state) => ({ isMenuOpen: !state.isMenuOpen })),
  toggleCollapse: () => set((state) => ({ isCollapsed: !state.isCollapsed })),

  incrementViews: (postId) =>
    set((state) => ({
      posts: state.posts.map((post) =>
        post.id === postId ? { ...post, views: post.views + 1 } : post,
      ),
      featuredPosts: state.featuredPosts.map((post) =>
        post.id === postId ? { ...post, views: post.views + 1 } : post,
      ),
    })),

  incrementLikes: (postId) =>
    set((state) => ({
      posts: state.posts.map((post) =>
        post.id === postId ? { ...post, likes: post.likes + 1 } : post,
      ),
      featuredPosts: state.featuredPosts.map((post) =>
        post.id === postId ? { ...post, likes: post.likes + 1 } : post,
      ),
    })),
}));

// 导出useShallow钩子
export const useShallowBlogStore = (selector: (state: BlogState) => any) => useBlogStore(selector);

// 导出类型
export type { BlogPost, UserState, BlogState, UserProfile, Skill, WorkExperience };
